<template>
<div>
    <div class="video-layer">
      <div class="bwc-video" id="compt0" >
        <span v-show="!isPlaying" v-if="videoSrc" class="bwc-video-play-icon"  @click="play" ca="fl_v170522_videoplay_click"></span>
        <!-- <span @click="mutedControl" class="audio-control" :class="{audiocontrolon :opensound}" ca="fl_v170522_sound_click"></span> -->
        <video @click.stop="pause" ref="vid"  x-webkit-airplay="true" webkit-playsinline playsinline="true" preload="auto"  :style="{display:display}"> <source :src="videoSrc" type="video/mp4"> Your browser does not support the video tag. </video>
        <div v-if="videoSrc" v-show="isNotPlayedYet" class="bwc-video-mask"></div>
      </div>
    </div>
   <div class="content-layer">
    <h1></h1>
        <div class="round-layer">
        <div class="round" >
            <div class="round-arrow" @click="popPlateWin" ref="rid" ca="fl_v170522_start_click">
               <span>{{unusedNums}}</span>
            </div>
        </div>
        </div>
         <div class="share">
           <div class="share-count" v-on:click="popShare" ca="fl_v170522_indexshare_click">
              <span>{{shareCount}}</span>
           </div>
           <span class="rule" v-on:click="popRules">活动规则</span>
           <h2>{{prizeCount}}位幸运用户成功抽中霸王餐</h2>
          <div class="scroll-wrap">
            <ul class="scroll-content" :style="{top}">
                <li v-for="item in prizeList">{{item}}</li >
            </ul>
        </div>
        <div>
    </div>


   </div>
    </div>
    <footer></footer>
    <mt-popup  v-model="popupRules">
        <div  class="popupPlateChoose">
          <h2><span v-on:click="popRules" class="pop-close"></span></h2>
          <h3>活动规则</h3>
          <div class="rule-content">
              <h4>1. 活动时间持续多久？</h4>
              <p>即日起至2017年7月30日23:59:59；</p>
              <h4>2. 如何参加抽奖？</h4>
              <p>活动期间，每个车享账号可享一次抽奖机会。每天首次成功分享可另得一次抽奖机会；</p>
              <h4>3. 抽中的霸王餐如何使用？</h4>
              <p>① 活动期间，抽中的霸王餐体验券可在车享家APP-我的-优惠券内进行查看；</p>
              <p>② 在车享家APP中选择相应服务下单后选择霸王餐体验券即可使用；</p>
              <p>③ 所有霸王餐请在有效期内到店完成服务，券过期则作废；</p>
              <p>④ 参与霸王餐活动的用户，需在《汽车之家》论坛发布体验帖，高质量帖有机会获得500元车享金（图文并茂）；
              汽车之家论坛完成发帖后，用户将帖子链接发送至车享体验官邮箱：tiyanguan@chexiang.com
              邮件发送内容含：帖子链接+体验服务门店+用户姓名及联系方式</p>
              <h4>4. 购买的霸王券如何使用？ </h4>
              <p>① 每个车享账户每种券限购一张0.88元的霸王券，如下单成功但未在指定时间内（2个小时）完成支付，则无法再次进行购买，霸王券不可进行退款；<a class="toLink" :href="orderListUrl">点击查看我的购买记录</a></p>
              <p>② 购买霸王券后将推送短信至车享账户关联手机，用户持短信到店进行服务兑换；</p>
              <p>③ 为了更好为您提供服务，建议可提前至少1天致电门店进行预约，具体门店信息可下载车享家APP进行查看；</p>
              <p>④ 所有霸王券请于有效期内到店兑换，券过期则作废；<a class="toLink" :href="viewQuanUrl">点击查看我的霸王券详情</a></p>
              <h4>5. 遇到了其他问题怎么办？ </h4>
              详询车享家客服热线：4008-020-6666
              <h4>6. 页面“市场价”的解释（例如市场价：120）：页面展示的价格为车享家线下门店门市价（套餐或套餐卡商品价格为套餐包含项目门店价总和），由于地区、时间的差异和市场波动，价格有可能会和您购物时展示的价格不一致，该价格仅供参考，谢谢！</h4>
              <h4>7.车享家在法律规定的范围内拥有本次活动最终解释权。</h4>
          </div>
        </div>
    </mt-popup>
    <mt-popup  v-model="popupPlate">
       <div class="popup-plate">
          <h2><span v-on:click="popPlateWin" class="pop-close" ca="fl_v170522_car_close"></span></h2>
          <div class="plate-input-layer">
          <span v-on:click = "popChoosePlate" class="plate-choose"><i>{{plate}}</i></span>
          <input type="text"  maxlength="7" placeholder="请输入车牌号" v-model="plateText" class="plate-text" />
          </div>
          <div class="plate-submit-btn">
          <input type="button" value="" v-on:click="startRound" ca="fl_v170522_start1_click">
          </div>
        </div>
    </mt-popup>
    <mt-popup  v-model="popupPlateChoose">
        <div class="popupPlateChoose">
          <h2><span v-on:click="popChoosePlate" class="pop-close"></span></h2>
          <h3>车牌</h3>
          <div class="popup-plate-list">
              <ul class="zhi" id="characters" v-show='cState'>
                <li v-for="item in characters" v-on:click="choosePlate(item,'c')" :class="{'on': item == plate}"><span>{{item}}</span></li>
                <li class="choose-c" v-on:click="chooseLetter"><i></i>ABC</li>
              </ul>
              <ul v-show='lState' >
                 <li v-for="item in letters"  v-on:click="choosePlate(item,'l')"  :class="{'on': item == plate}"><span>{{item}}</span></li>
                  <li class="choose-c" v-on:click="chooseCharacter"><i></i>汉字</li>
              </ul>
          </div>
        </div>
    </mt-popup>

        <div class="popupshare-bg" v-show="popupShare" v-on:click="popupshareControl"></div>

</div>
</template>

<script>
import common from "../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
            plate:localStorage.getItem("plate")?localStorage.getItem("plate"):"沪",
            cState:true,
            lState:false,
            popupPlate:false,
            popupPlateChoose:false,
            popupRules:false,
            popupShare:false,
            characters:["沪", "京", "津", "冀", "晋", "蒙", "辽", "吉", "黑", "苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "桂", "琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁", "新"],
            letters:["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
            shareCount:0,
            prizeCount:0,
            awards:[],
            unusedNums:0,
            plateText:localStorage.getItem("plateText")?localStorage.getItem("plateText"):"",
            initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
            videoSrc:"https://video.chexiang.com/video_prd/advert/201705/bwchd.mp4?v=123",
            videoPosterSrc:require("../../assets/image/dineAndDash/video-poster.png"),
            isNotPlayedYet: !0,
            isPlaying: !1,
            _timer:"",
            startTime:"",
            opentype: common.getCookie('wemall_opentype_c'),
            _animateStartAngle:"",
            isLogin:false,
            muted:"muted",
            opensound:false,
            prizeList: ["183****4172 恭喜抽中4L小保养套餐","158****0871 恭喜抽中免费机器打蜡","139****7365 恭喜抽中车享家定制雨刮","136****1192 恭喜抽中可视化空调清洗","138****5609 恭喜抽中4L小保养套餐","135****0907 恭喜抽中可视化空调清洗","138****1631 恭喜抽中免费机器打蜡","158****5075 恭喜抽中车享家定制雨刮","189****4775 恭喜抽中免费机器打蜡","187****8223 恭喜抽中车享家定制雨刮","138****6879 恭喜抽中可视化空调清洗","182****8707 恭喜抽中4L小保养套餐","137****1641 恭喜抽中可视化空调清洗","138****1867 恭喜抽中免费机器打蜡","137****1015 恭喜抽中车享家定制雨刮","138****0419 恭喜抽中免费机器打蜡","133****7269 恭喜抽中4L小保养套餐","130****0166 恭喜抽中免费机器打蜡","137****7371 恭喜抽中车享家定制雨刮","138****8072 恭喜抽中可视化空调清洗","139****9065 恭喜抽中免费机器打蜡","135****7081 恭喜抽中车享家定制雨刮","134****0358 恭喜抽中可视化空调清洗","186****9196 恭喜抽中4L小保养套餐","186****2981 恭喜抽中车享家定制雨刮","139****8622 恭喜抽中可视化空调清洗","152****0311 恭喜抽中4L小保养套餐","139****8077 恭喜抽中可视化空调清洗","150****7771 恭喜抽中车享家定制雨刮","135****5396 恭喜抽中可视化空调清洗"],
            activeIndex: 0,
            shareObj:{},
            orderListUrl: common.isEnv("//member") + '/m/order/mallOrder.htm',
            viewQuanUrl: common.isEnv("//member") + '/m/coupon.htm',
            ifshowPlateChoose:true,
            display:"block"
        }
    },
    computed: {
      top() {
        return - this.activeIndex * 1.4 + 'rem';
      }
    },
    mounted: function() {
       //this.$refs.vid.play();
       //this.play();
       this.initLottery();
       this.marqueeControl();
       //this.$refs.vid.muted = !0    
    },
    components: {  },
    methods: {
        marqueeControl:function(){
             setInterval(_ => {
              if(this.activeIndex < this.prizeList.length-1) {
                this.activeIndex += 1;
              } else {
                this.activeIndex = 0;
              }
            }, 2500);
        },
        mutedControl:function(){
          this.opensound = !this.opensound;
          this.$refs.vid.muted = this.opensound?!1:!0;
        },
        play: function() {
            this.isNotPlayedYet && (this.isNotPlayedYet = !1), this.isPlaying = !0, this.$refs.vid.play()
        },
        pause: function() {
            this.isPlaying = !1, this.$refs.vid.pause()
        },

        initLottery:function(){
            var _this = this;
          	_this.$http.get(common.isdev() + "/bwcactive/initLottery/FREELUNCH.htm").then(function(d) {
            var result = d.data.result,
            obj = d.data.obj;
              if(result===1){
                  _this.shareCount = obj.shareCount;
                  _this.prizeCount = obj.prizeCount;
                  _this.awards = obj.awards;
                  _this.unusedNums = obj.unusedNums;
                  //_this.initSignUrl = common.getCookie("wx_base_domain");
                  _this.initShareInfo(_this.prizeCount);

              }else if(result===0&&d.msg===-2){
                  Toast("活动已结束");
              }
            }, function(err) {
               Toast(err);
            });



        },
        initShareInfo:function(prizeCount){
            var _this = this;
            _this.shareObj = {
              friend:{
                shareTitle:"来吃霸王餐，敢不敢？3999份车享家免费汽车服务在等你！",
                descContent:"无门槛参加抽奖，已有" + prizeCount + "人抽中霸王餐",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/bwcshare.jpg?v=1",
                lineLink:window.location.protocol + "//" + window.location.host + "/bwcactive/toHomePage.htm"
              },
              friendQuan:{
                shareTitle:"来吃霸王餐，敢不敢？3999份车享家免费汽车服务在等你！",
                descContent:"",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/bwcshare.jpg?v=1",
                lineLink:window.location.protocol + "//" + window.location.host + "/bwcactive/toHomePage.htm"
              }
            }
            if(_this.opentype != 6){
               common.initWxShare(_this, _this.initSignUrl, _this.shareObj, 1);
            }
        },
        chooseLetter:function(){
            this.cState = false;
            this.lState = true;
        },
        chooseCharacter:function(){
            this.cState = true;
            this.lState = false;
        },
        startRound:function(){
            var _this = this;
            var cxId = common.getCookie("wemall_cxid_c");
            var isPlate = /[a-zA-Z]{1}[a-zA-Z_0-9]{4,5}[a-zA-Z_0-9_\u4e00-\u9fa5]$/;
            var plateCheck = isPlate.test(this.plateText);
            if(plateCheck){
              _this.popupPlate = !_this.popupPlate;
              _this.display = _this.popupPlate?"none":"block";
              _this.ifshowPlateChoose =false;
              localStorage.setItem("plate",this.plate);
              localStorage.setItem("plateText",this.plateText);
              var a = {
                "cp":this.plate+this.plateText
                 // "cp":"1111"
                }
                _this.$http.post(common.isdev()+"/bwcactive/partInLottery/FREELUNCH.htm",a,{timeout:5000,emulateJSON:true}).then(function(d){
                      var data = d.data,
                      result = data.result,
                      message = (result===1&&data.msg)?data.msg:'',
                      toastmsg = ["很遗憾未中奖","恭喜中奖"],
                      gotoUrl = ["fail/fail.shtml","s/s.shtml"];
                      var roundMsg = {
                        "msg":toastmsg[result],
                        "gotoUrl":gotoUrl[result],
                        "animateTo" : _this.runzp(parseInt(message))
                      }
                      _this.arrowRound(roundMsg);
                  },function(err){
                      if(err.status == 408){
                        Toast(err.status);
                      }else{Toast("系统异常，请稍后再试");}
                })
            }else{
                Toast("请输入正确的车牌")
            }
        },
        popPlateWin:function(){
          var _this = this;
          if(_this.ifshowPlateChoose){
            _this.checkLogin(function(){
               if (_this.isLogin) {
                 if(_this.unusedNums != 0){
                    _this.popupPlate = !_this.popupPlate;
                    _this.display = _this.popupPlate?"none":"block";
                 }else{
                  Toast("今日无剩余抽奖次数，每天首次分享成功可得1次抽奖机会");
                 }
               }else console.log("islogin:", _this.isLogin);
            });
          }
        },
        popChoosePlate:function(){
            this.popupPlateChoose = !this.popupPlateChoose;
        },
        popRules:function(){
            this.popupRules = !this.popupRules;
            this.display = this.popupRules?"none":"block";
        },
        popShare:function(){
          var _this= this;
          _this.checkLogin( function(){
           if (_this.isLogin) {
            console.log("isLogin: ",_this.isLogin)
             if( _this.opentype == 6) {
                  lb.shareInfo({
                      url : _this.shareObj.friend.lineLink,
                      title : _this.shareObj.friend.descContent,
                      content : _this.shareObj.friend.shareTitle,
                      imgUrl : _this.shareObj.friend.imgUrl
                  },function (data) {
                    if(data.errorCode == 0){
                      common.shareSucess(_this, 1);
                      //Toast(data.errorCode)
                    }else{
                      Toast("分享失败");
                    }
                  })
                }else {
                 _this.popupShare = !_this.popupShare;
                }
             }else {console.log("未登录不能分享");Toast('未登录不能分享')}
          });

        },
        popupshareControl:function(){
           this.popupShare = !this.popupShare;
        },
        //检测是否登录
        checkLogin:function( fn ){
          this.$http.get(common.isdev() + "/bwcactive/checkLogin.htm").then((d)=>{
            var result = d.body.result, loginUrl = d.body.msg;
            if(result == '0' ){
              window.location.href = loginUrl;
            }else{
              this.isLogin = true;
              fn();
            }
          },(err)=>{
            Toast("网络异常");
          });
        },
        choosePlate:function(item,t){
            this.plate =  item;
            if(t=="c"){
              this.cState = true;
              this.lState = false;
            }else{
              this.cState = false;
              this.lState = true;
            }
            this.popupPlateChoose = !this.popupPlateChoose;
        },
        arrowRound:function(roundMsg){
            var _this = this;
            if (_this._timer) {
                clearTimeout(this._timer);
            }
            _this.startTime = +new Date;
            _this._animateStartAngle = 0;
            _this.animate(roundMsg);
        },
        animate:function(roundMsg){
            var _this = this;
            var startTime = _this.startTime,
            _animateStartAngle = _this._animateStartAngle;
             var actualTime =  +new Date;
             var duration = 3000;
             var animateTo = roundMsg.animateTo+1440;
             var checkEnd = actualTime -startTime > duration;
             if (checkEnd)
                {
                     clearTimeout(_this._timer);
                     Toast(roundMsg.msg);
                     _this.unusedNums = _this.unusedNums-1;
                     _this.ifshowPlateChoose = true;
                     this.toUrl(_this.initSignUrl, roundMsg.gotoUrl);
                 }
                 else
                 {
                     this._timer = setTimeout(function()
                       {
                             var angle = _this.easing(0, actualTime - startTime, _animateStartAngle, animateTo -_animateStartAngle, duration);
                             //console.log(actualTime,startTime,_animateStartAngle,animateTo,duration,"retert");
                            // console.log(angle);
                             _this.rotate((~~(angle*10))/10);
                             _this.animate(roundMsg);

                        }, 10);
                 }
        },
        rotate:function(angle){
            this.$refs.rid.style.transform="rotate(" + angle%360 + "deg)";
        },
        easing:function(x, t, b, c, d) {
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        toUrl:function(curl, burl){
          var _this = this;
          window.setTimeout(function(){
            var h = window.location.protocol + "//" + window.location.host;
            if(_this.opentype != 6){
            window.location.href = curl + "/wxoauth2/s/setOpenIdToCookie.htm?turl=" + h + "/cx/cxj/cxjweb/dineAndDash/"+ burl;
          }else{
             window.location.href = h + "/cx/cxj/cxjweb/dineAndDash/"+ burl;
          }
          },1000)
        },

        randomnum:function(smin, smax) {// 获取2个值之间的随机数
            var Range = smax - smin;
            var Rand = Math.random();
            return (smin + Math.round(Rand * Range));
        },
        runzp:function(index) {
           var angle = 330;
           if(index){
                switch (index) {
                case 1:
                    angle = 45;
                    break;
                case 2:
                    angle = 135;
                    break;
                case 3:
                    angle = 225;
                    break;
                case 4:
                    angle = 315;
                    break;
                }
                 return  angle;
            } else {
                var r = this.randomnum(5, 8);
                switch (r) {
                case 5:
                    angle = 0;
                    break;
                case 6:
                    angle = 90;
                    break;
                case 7:
                    angle = 180;
                    break;
                 case 8:
                    angle = 270;
                    break;
                }
                 return  angle;
            }

        }

      }
}

</script>

<style lang="scss">
@import '../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
    margin: 0;
    padding: 0;
    background-color:#00aaf8;
}
.video-layer{
  z-index:5;
  position:relative;
}
.toLink{color:#B30F32;text-decoration:underline;}
.round-layer{
    padding-top:rem(53);
}
.round{
    width:rem(660);
    height:rem(660);
    background:transparent url("../../assets/image/dineAndDash/index-zp.png") no-repeat top left;
    background-size:cover;
    margin:0 auto;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:rem(-330);
    margin-top:rem(-330);
    .round-arrow{
        width:rem(300);
        height:rem(337);
          background:transparent url("../../assets/image/dineAndDash/index-arrow.png") no-repeat top left;
          background-size:rem(300) rem(337);
          position:absolute;
          left:50%;
          top:50%;
          margin-left:rem(-150);
          margin-top:rem(-168.5);
          z-index:1111;
      span{
         position:absolute;
         left:rem(210);
         bottom:rem(100);
         transform:rotate(-56deg);
         font-size:rem(24);
         color:#006ed8;
         width: rem(50);
         height: rem(30);
      }
    }
}

.awardslist{
    li{
        list-style:none;
        float:left;
    }
}

.bwc-video-play-icon {
    z-index: 2;
    display: inline-block;
    background-image: url(../../assets/image/dineAndDash/video-icon.png);
    margin-top: rem(-46);
    margin-left: rem(-46);
    position: absolute;
    top: 50%;
    left: 50%;
    width: rem(92);
    height: rem(92);
    background-size: rem(92);
}

.bwc-video-mask {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.3);
    background-size: cover;
    background-repeat: no-repeat;
}

.bwc-video {
    position: relative;
    z-index:3;
    height: rem(305);
    overflow: hidden;
    background:#000 url("../../assets/image/dineAndDash/video-poster.png") no-repeat center center;
    background-size:cover;
    video{
       height:100%;
       width:100%;
    }
}
.content-layer{
    background:transparent url("../../assets/image/dineAndDash/index-bg.jpg") no-repeat top left;
    background-size:cover;
    width:rem(750);
    height:rem(980);
    position:relative;
    h1{
       background:transparent url("../../assets/image/dineAndDash/index-title.png") no-repeat top left;
       background-size:contain;
       width:rem(750);
       height:rem(293);
       margin:0;
       position:absolute;
       z-index:11;
    }
}
.share{
    width:rem(750);
    height:rem(190);
    position: absolute;
    bottom: rem(20);
    font-size:rem(32);
    z-index:10;
    .share-count{
       width:rem(360);
       height:rem(130);
       background:transparent url("../../assets/image/dineAndDash/share-btn.png") no-repeat;
       background-size:cover;
       margin-left:rem(195);
       position:relative;
       span{
          position:absolute;
          font-size:rem(22);
          bottom:rem(28);
          left:rem(96);
          display:inline-block;
          width: rem(86);
          text-align: center;
        }
    }
    .rule{
       position:absolute;
       bottom:rem(20);
       color:#fff;
       left:rem(160);
       text-decoration:underline;
       font-size:rem(26);
    }
    h2{
       position:absolute;
       bottom:rem(34);
       left:rem(280);
       font-size:rem(10);
       color:#071b4f;
       font-size:rem(20);
       line-height:rem(25);
    }

}
.popup-plate{
  width:rem(710);
  height:rem(366);
 background: #077bd4;
border: rem(15) solid #ffd924;
box-shadow: inset rem(4) rem(6) rem(10) rgba(15, 5, 4, 0.75);
  h2{
    overflow:hidden;
    clear:both;
  }
}
.plate-choose{
  display:inline-block;
  width:rem(119);
  height:rem(62);
  background:transparent url("../../assets/image/dineAndDash/plate-choose-bg.png") no-repeat;
  background-size:cover;
  i{
    padding-left:rem(30);
    padding-top:rem(8);
    font-size:rem(38);
    color:#fff;
    display:inline-block;
    height:rem(40);
    line-height:rem(40);
  }
}
.plate-text{
  height:rem(60);
  width:rem(230);
  font-size:rem(36);
  border:none;
  background:none;
  margin-bottom:rem(26);
  color:#fff;
  margin-left:rem(20);
}
.plate-text:-webkit-input-placeholder {
    font-size:rem(38);
  }
.plate-text:-moz-placeholder {
    font-size:rem(38);
  }
.plate-input-layer{
  width:rem(540);
  padding:0 rem(80);
  border-bottom:rem(3) solid #ffd924;
  margin-left:rem(80);
  margin-top:rem(20);
}
.pop-close{
  width:rem(58);
  height:rem(58);
  background:transparent url("../../assets/image/dineAndDash/pop-close.png") no-repeat bottom left;
  background-size:rem(29) rem(29);
  display:inline-block;
  float:right;
}
.plate-submit-btn{
  text-align:center;
  width: rem(710);
  margin-top:rem(30);
  input{
    width:rem(358);
    height:rem(93);
    background:transparent url("../../assets/image/dineAndDash/plate-submit-btn.png") no-repeat;
    background-size:cover;
    border:none;
  }
}
.popupPlateChoose{
  width:rem(715);
  height:rem(1079);
 background: #077bd4;
border: rem(15) solid #ffd924;
box-shadow: inset rem(4) rem(6) rem(10) rgba(15, 5, 4, 0.75);
overflow:hidden;
  h2{
    overflow:hidden;
    clear:both;
  }
  h3{
    font-size: rem(64);
    text-align: center;
    margin-bottom: rem(40);
    color: #fff;
  }
}
.popup-plate-list {
    padding-left: rem(2);
}
.popup-plate-list ul {
    margin:0;
    padding:0 rem(60);
    clear:both;
    overflow: hidden;
    margin-left:rem(10);
}
.popup-plate-list li {
    text-align: center;
    color: #333;
    margin: 0 7% 6% 0;
    font-size: rem(28);
    float: left;
    border-radius:rem(10);
    list-style: none;
    span{
      display: inline-block;
      width: rem(106);
      height: rem(60);
      line-height: rem(60);
      font-size:rem(40);
      color:#fff;
    }
    &:nth-child(4n) {
            margin-right: 0;
          }
          &.on {
             background: #006bd5;
             color: #fff;
          }
          &:last-child {
            background-color:#c8c8c8;
            width: rem(106);height: rem(60);
            line-height:rem(60);
            color:#fff;
          }
          &:last-child i {
             display: inline-block;
            background: transparent url("../../assets/image/dineAndDash/pop-choose-state-icon.png") no-repeat left top;
              width: rem(24);
              height: rem(18);
              background-size:cover;
              margin-right: rem(10);
          }
}
.rule-content{
  margin-top:rem(20);
  padding:0 rem(30);
  font-size:rem(28);
  color:#fff;
  line-height:rem(50);
  height:rem(800);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  h4{
    font-weight:bold;
    font-size:rem(28);
    color:#003ba6;
  }
}
footer{
    position:fixed;
    background:transparent url("../../assets/image/dineAndDash/index-bottom.png") no-repeat top left;
    background-size:contain;
    width:rem(750);
    height:rem(384);
    bottom:0;
}
.mint-toast{
    z-index:200000!important
}
.popupshare-bg{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background:#000 url("../../assets/image/dineAndDash/sharebtn.png") no-repeat bottom left;
    background-size:cover;
    z-index:10000;
    background-color: rgba(0, 0, 0, 0.8);
}
.audio-control{
   z-index: 233;
   display: inline-block;
   background:transparent url("../../assets/image/dineAndDash/no-sound-icon.png") no-repeat;
   position: absolute;
   bottom: 5%;
   right: 5%;
   width: rem(60);
   height: rem(60);
   background-size: rem(60);
}
.audiocontrolon{
   z-index: 2;
   display: inline-block;
   background:transparent url("../../assets/image/dineAndDash/sound-icon.png") no-repeat;
   position: absolute;
   bottom: 5%;
   right: 5%;
   width: rem(60);
   height: rem(60);
   background-size: rem(60);
}

.scroll-wrap{
  position:absolute;
  bottom:rem(0);
  left:rem(280);
  color:#071b4f;
  font-size:rem(16);
  line-height:rem(28);
  height:rem(28);
  overflow: hidden;
}

.scroll-content{
  position: relative;
  transition: top 1s;
  li{
    line-height: rem(28);
    height:rem(28);
    overflow:hidden;
  }
}
</style>

